<template>
  <div id="content">
    <globle-linear-border>
      <el-card class="searchBox">
        <el-form :inline="true" label-width="68px">
          <el-form-item label="姓名">
            <el-input
              v-model="pageQuery.otherParams.stuName"
              placeholder="输入学生姓名搜索"
              clearable
              @blur="getWorkPageInfo"
              @clear="getWorkPageInfo"
            />
          </el-form-item>
          <el-form-item label="是否工作">
            <el-select v-model="pageQuery.otherParams.isWorked" placeholder="选择是否工作" clearable @change="getWorkPageInfo">
              <el-option label="是" value="1" />
              <el-option label="否" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="岗位">
            <el-input
              v-model="pageQuery.otherParams.workType"
              placeholder="输入岗位搜索"
              clearable
              @blur="getWorkPageInfo"
              @clear="getWorkPageInfo"
            />
          </el-form-item>
          <el-form-item label="工作城市">
            <el-input
              v-model="pageQuery.otherParams.workCity"
              placeholder="输入工作城市搜索"
              clearable
              @blur="getWorkPageInfo"
              @clear="getWorkPageInfo"
            />
          </el-form-item>
          <el-form-item label="公司名称">
            <el-input
              v-model="pageQuery.otherParams.companyName"
              placeholder="输入公司名称搜索"
              clearable
              @blur="getWorkPageInfo"
              @clear="getWorkPageInfo"
            />
          </el-form-item>
        </el-form>
      </el-card>
    </globle-linear-border>
    <globle-linear-border style="margin-top: 20px">
      <el-card class="mainBox">
        <span v-if="tableData.rows">
          <el-table
            ref="tableRef"
            :data="tableData.rows"
            :border="true"
            stripe
            cell-class-name="table-cell"
            header-cell-class-name="table-header-cell"
          >
            <el-table-column property="studentId" label="学号" width="140" />
            <el-table-column property="stuName" label="姓名" />
            <el-table-column label="部门">
              <template #default="scope">{{ scope.row.department + ' 部' }}</template>
            </el-table-column>

            <el-table-column property="companyName" label="公司名称" width="180">
              <template #default="scope">{{ blank(scope.row.companyName) }}</template>
            </el-table-column>
            <el-table-column property="workType" label="岗位">
              <template #default="scope">{{ blank(scope.row.workType) }}</template>
            </el-table-column>
            <el-table-column property="workCity" label="工作城市">
              <template #default="scope">{{ blank(scope.row.workCity) }}</template>
            </el-table-column>
            <el-table-column label="是否工作">
              <template #default="scope">
                <el-tag effect="dark" type="success" v-if="scope.row.isWorked === 1">是</el-tag>
                <el-tag effect="dark" type="danger" v-else>否</el-tag>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-model:currentPage="pageQuery.pageParams.pageNum"
            v-model:page-size="pageQuery.pageParams.pageSize"
            :page-sizes="pageSizeOption"
            :background="true"
            :small="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.totalSize"
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
          />
        </span>
      </el-card>
    </globle-linear-border>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox, ElTable, UploadFile } from 'element-plus';
import { IPageParams, IPageRes, IFalseDelete, APIData, IStuWorkPageParams, IStuWork } from '../../../type';
import { useUserStore } from '../../../store/user';
import { useAPI } from '../../../request/api';
const store = useUserStore();

onMounted(() => {
  getWorkPageInfo();
});

const blank = computed(() => (str: string) => {
  if (str === null || str === '') return '无';
  else return str;
});

// store.$subscribe((args: any, states) => {
//   if (pageQuery.otherParams.stage != states.currentStage) {
//     pageQuery.otherParams.stage = states.currentStage;
//     getWorkPageInfo();
//   }
// });

const api = useAPI();
const tableRef = ref<InstanceType<typeof ElTable>>();

const pageSizeOption = [5, 10, 15, 20];
const pageQuery = reactive<IStuWorkPageParams>({
  otherParams: {
    stage: store.currentStage,
    department: store.currentDepartment,
    companyName: '',
    isWorked: '',
    stuName: '',
    workCity: '',
    workType: '',
  },
  pageParams: {
    pageNum: 1,
    pageSize: pageSizeOption[1],
    sortField: '',
    sortType: '',
  },
});
const tableData = ref({} as IPageRes);

//分页大小
const onSizeChange = (val: number) => {
  pageQuery.pageParams.pageSize = val;
  getWorkPageInfo();
};
//分页页码
const onCurrentChange = (val: number) => {
  pageQuery.pageParams.pageNum = val;
  getWorkPageInfo();
};

const getWorkPageInfo = async () => {
  const res: APIData = await api.findPage(pageQuery, store.role, 'stuWork');
  if (res.code === 200) tableData.value = res.data;
  else ElMessage.error(res.message);
};
</script>

<style lang="scss" scoped>
#content {
  height: 100%;
  .searchBox {
    &-item {
      margin-right: 10px;
    }
    :deep(.el-form-item) {
      margin-bottom: 8px;
    }
    :deep(.el-card__body) {
      display: flex;
      justify-content: space-between;
    }
    section {
      display: flex;
    }
    :deep(.el-input__wrapper) {
      width: 200px;
    }
  }
  .mainBox {
    :deep(.el-checkbox__inner) {
      border: 1px solid var(--font-color);
      background-color: var(--main-color);
      transition: background 0.3s ease;
    }
  }
}
</style>
